<template>
  <div class="login-container">
    <!-- 左侧装饰区 -->
    <div class="login-decoration">
      <div class="decoration-content">
        <div class="logo">
          <div class="logo-icon"></div>
          <h1>皮皮虾管理后台</h1>
        </div>
        <p class="slogan">高效管理，轻松运营</p>
        <div class="wave-animation"></div>
      </div>
    </div>

    <!-- 右侧认证表单 -->
    <div class="auth-form-container">
      <div class="auth-form-wrapper">
        <!-- 标签页切换登录/注册 -->
        <el-tabs v-model="activeTab" class="auth-tabs">
          <el-tab-pane label="登录" name="login">
            <h2 class="form-title">账户登录</h2>
            <p class="form-subtitle">请输入账号密码登录管理后台</p>

            <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginRules"
                class="auth-form"
            >
              <el-form-item prop="username">
                <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                    prefix-icon="User"
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="Lock"
                    show-password
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item class="form-actions">
                <el-checkbox v-model="loginForm.remember" class="remember-checkbox">
                  记住密码
                </el-checkbox>
                <el-link type="primary" class="forgot-link">忘记密码?</el-link>
              </el-form-item>

              <el-form-item>
                <el-button
                    type="primary"
                    class="auth-button"
                    @click="handleLogin"
                    :loading="loginLoading"
                >
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="register">
            <h2 class="form-title">账户注册</h2>
            <p class="form-subtitle">创建新账户以使用管理后台</p>

            <el-form
                ref="registerFormRef"
                :model="registerForm"
                :rules="registerRules"
                class="auth-form"
            >
              <el-form-item prop="username">
                <el-input
                    v-model="registerForm.username"
                    placeholder="请设置用户名"
                    prefix-icon="User"
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item prop="email">
                <el-input
                    v-model="registerForm.email"
                    placeholder="请输入邮箱"
                    prefix-icon="Message"
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请设置密码"
                    prefix-icon="Lock"
                    show-password
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item prop="confirmPassword">
                <el-input
                    v-model="registerForm.confirmPassword"
                    type="password"
                    placeholder="请确认密码"
                    prefix-icon="Lock"
                    show-password
                    autocomplete="off"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                    type="primary"
                    class="auth-button"
                    @click="handleRegister"
                    :loading="registerLoading"
                >
                  注册
                </el-button>
              </el-form-item>

              <p class="register-note">
                点击注册即表示同意我们的
                <el-link type="primary">服务条款</el-link>
                和
                <el-link type="primary">隐私政策</el-link>
              </p>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

// 路由实例
const router = useRouter();

// 当前激活的标签页（登录/注册）
const activeTab = ref('login');

// 加载状态
const loginLoading = ref(false);
const registerLoading = ref(false);

// 表单引用
const loginFormRef = ref(null);
const registerFormRef = ref(null);

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  remember: false
});

// 注册表单数据
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
});

// 登录表单验证规则
const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
  ]
});

// 注册表单验证规则
const registerRules = reactive({
  username: [
    { required: true, message: '请设置用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

// 处理登录
const handleLogin = async () => {
  // 表单验证
  const valid = await loginFormRef.value.validate();
  if (!valid) return;

  // 模拟登录加载
  loginLoading.value = true;

  try {
    // 这里替换为实际登录接口调用
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 模拟登录成功（实际项目中根据接口返回结果判断）
    if (loginForm.username === 'admin' && loginForm.password === '123456') {
      // 保存token
      localStorage.setItem('token', 'your_auth_token_here');

      // 记住密码处理
      if (loginForm.remember) {
        localStorage.setItem('username', loginForm.username);
      } else {
        localStorage.removeItem('username');
      }

      ElMessage.success('登录成功');
      router.push('/dashboard');
    } else {
      ElMessage.error('用户名或密码错误');
    }
  } catch (error) {
    ElMessage.error('登录失败，请稍后重试');
    console.error('登录错误:', error);
  } finally {
    loginLoading.value = false;
  }
};

// 处理注册
const handleRegister = async () => {
  // 表单验证
  const valid = await registerFormRef.value.validate();
  if (!valid) return;

  // 模拟注册加载
  registerLoading.value = true;

  try {
    // 这里替换为实际注册接口调用
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500));

    // 模拟注册成功（实际项目中根据接口返回结果判断）
    ElMessage.success('注册成功，请登录');
    activeTab.value = 'login'; // 切换到登录标签页
    registerForm.username = ''; // 清空注册表单
    registerForm.email = '';
    registerForm.password = '';
    registerForm.confirmPassword = '';
  } catch (error) {
    ElMessage.error('注册失败，请稍后重试');
    console.error('注册错误:', error);
  } finally {
    registerLoading.value = false;
  }
};

// 页面加载时获取记住的用户名
onMounted(() => {
  const savedUsername = localStorage.getItem('username');
  if (savedUsername) {
    loginForm.username = savedUsername;
    loginForm.remember = true;
  }
});
</script>

<style scoped>
.login-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 左侧装饰区样式 */
.login-decoration {
  flex: 1;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: white;
  position: relative;
  overflow: hidden;
}

.decoration-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
}

.logo {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background-color: #f97316;
  border-radius: 6px;
  margin-right: 12px;
}

.logo h1 {
  font-size: 28px;
  margin: 0;
}

.slogan {
  font-size: 18px;
  opacity: 0.8;
  max-width: 500px;
  line-height: 1.6;
}

/* 波浪动画效果 */
.wave-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.1)' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,181.3C672,181,768,203,864,197.3C960,192,1056,160,1152,149.3C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
  background-size: cover;
  animation: wave 15s linear infinite;
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1440px;
  }
}

/* 右侧认证表单样式 */
.auth-form-container {
  flex: 0 0 420px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.auth-form-wrapper {
  width: 100%;
  max-width: 320px;
}

.auth-tabs {
  width: 100%;
}

.el-tabs__header {
  margin-bottom: 20px;
}

.el-tabs__item {
  font-size: 16px;
  color: #64748b;
}

.el-tabs__item.is-active {
  color: #f97316;
}

.el-tabs__active-bar {
  background-color: #f97316;
}

.form-title {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.form-subtitle {
  color: #64748b;
  margin: 0 0 30px 0;
  font-size: 14px;
}

.auth-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  height: 44px;
  border-radius: 6px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remember-checkbox {
  color: #64748b;
  font-size: 14px;
}

.forgot-link {
  font-size: 14px;
}

.auth-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  background-color: #f97316;
  border-color: #f97316;
}

.auth-button:hover,
.auth-button:focus {
  background-color: #ea580c;
  border-color: #ea580c;
}

.register-note {
  margin: 15px 0 0 0;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-decoration {
    display: none;
  }

  .auth-form-container {
    flex: 1;
  }
}
</style>
